<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 7</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // slot不支持直接绑定事件，需要在外面包一个标签来触发事件
  // slot中使用的数据——作用域的问题
  // 父模板里调用的数据属性，使用的都是父模板里的数据
  // 子模板里调用的数据属性，使用的都是子模板里的数据
  // <slot>默认值</slot> 中间的文字为默认值
  const app = Vue.createApp({

    data(){
      return {
        title: '提交111'
      }
    },

    template: `
      <div>
         <test>
            <div>提交</div>
        </test>
        <test>
            <button>提交</button>
        </test>
         <test></test>
      </div>
    `
  });


  app.component('test', {
    props: ['content'],
    methods: {
      handleClick(){
        alert(123);
      },
    },
    template: `<div>
      <input type="text"/>
    <span @click="handleClick">
      <slot>默认值</slot>
    </span>
    </div>`
  })


  const vm = app.mount('#root');
</script>
</html>